<template>
  <!-- 二维码登陆 -->
  <div class="code">
    <i class="iconfont icon-diannaojiaobiao" @click="cat"></i>
    <h1 class="animate__animated animate__flash">微信扫码登入</h1>
    <div class="yard" v-loading="flag">
      <img :src="qrImg" />
      <i
        class="mask"
        v-if="this.showQrmask"
        :style="maskBg"
        @click="updateQr"
        style="cursor: pointer"
      ></i>
    </div>
    <p v-show="!showQrmask">请使用手机扫码登陆</p>
    <p v-show="showQrmask">点击刷新二维码</p>
  </div>
</template>
<script>
// 引入socket.io
import socketIo from "socket.io-client";
// 引入qrcode
import qrcode from "qrcode";
// 引入api
import * as api from "@/api/users";
// 引入成功和失败的扫码遮罩图
import invalidImg from "@/assets/img/1.png"; //失败
import scanSuccessImg from "@/assets/img/2.png"; //成功
import storage from "@/utils/storage"; //成功
export default {
  data() {
    return {
      flag: false,
      name: "convention",
      // 是否显示遮罩
      showQrmask: false,
      // 二维码图片
      qrImg: "",
      // 遮罩背景样式
      maskBg: { backgroundImage: `url(${scanSuccessImg})` }, //扫码成功
      // maskBgInvalid:{background:url(invalidImg)}  //二维码失效
    };
  },
  methods: {
    cat() {
      this.$emit("coname", this.name);
    },

    async getQrUrl(sid) {
      this.flag = true;
      let res = await api.getQrCodeApi(sid);
      let { scanCodeUrl: qrcodeUrl } = res.data; //给二维码取别名
      //  通过qrcode插件生成二维码
      qrcode.toDataURL(qrcodeUrl, (err, img) => {
        if (err) {
          throw err;
        }
        this.qrImg = img;
        //关掉遮罩
        this.showQrmask = false;
        this.flag = false;
      });
    },
    // 更新二维码地址
    updateQr() {
      let sid = storage.get("qf-sid");
      this.getQrUrl(sid);
    },
    storageUserInfo({ userInfo, token, permission }) {
			// 将信息存到vuex
			this.$store.commit('users/SET_USEINFO', userInfo)
			storage.set('userInfo', userInfo)
			storage.set('qf-token', token)
			storage.set('permission', permission)
		},
  },
  created() {
    // 建立socket连接
    let io = socketIo("wss://chst.vip");
    // 监听连接的事件
    io.on("connectSuccess", async ({ sid }) => {
      // 讲sid存到本地
      storage.set("qf-sid", sid);
      this.getQrUrl(sid);
    }),
      // 无效二维码
      io.on("invalidCode", (data) => {
        // 展示遮罩
        this.showQrmask = true;
        // 显示无效的二维码遮罩样式
        this.maskBg.backgroundImage = `url(${invalidImg})`;
      });

    // 扫码成功
    io.on("scancodeSuccess", async ({ state, wechatCode }) => {
      // 扫码成功，显示遮罩
      this.maskBg.backgroundImage = `url(${scanSuccessImg})`;
      this.showQrmask = true;
      if (state) {
        // 调用微信登入的接口
        let res = await api.wechatLogin(wechatCode);
        // storage.storageUserInfo(res.data);
        this.storageUserInfo(res.data);
        this.$router.push("/");
      } else {
        console.error(res);
      }
    });
  },
};
</script>
<style lang="less" scoped>
.code {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .icon-diannaojiaobiao {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 80px;
    color: #b0b0b0;
  }

  h1 {
    color: #fff;
    margin-bottom: 60px;
  }
  .yard {
    width: 200px;
    height: 200px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .mask {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5);
      display: flex;
      justify-content: center;
      position: absolute;
      top: 0;
    }
  }
  p {
    font-size: 16px;
    color: #fff;
  }
}
</style>